<template>
    <div class="myProfileNext">
        <Header>
            <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
            <span slot="title">完善个人信息</span>
        </Header>
        <mu-form :model="form" ref="profile">
            <mu-form-item label-width="100px" label-position="left" prop="province" label="省" :rules="provincesRules">
                <mu-text-field v-model="form.province"></mu-text-field>
            </mu-form-item>
            <mu-form-item label-width="100px" label-position="left" prop="city" label="市" :rules="provincesRules">
                <mu-text-field v-model="form.city"></mu-text-field>
            </mu-form-item>
            <mu-form-item label-width="100px" label-position="left" prop="address" label="详细地址" :rules="addressRules">
                <mu-text-field v-model="form.address"></mu-text-field>
            </mu-form-item>
            <mu-button color="primary">最后一步，完成</mu-button>
        </mu-form>
    </div>
</template>

<script>
    // 进入header
    import Header from '@/components/Header';
    export default {
        // 数据
        data() {
            return {
                form: {
                    // 省
                    province: '',
                    // 市
                    city: '',
                    // 详细地址
                    address: ''
                },
                // 校验规则
                provincesRules: [
                    { validate: (val) => !!val, message: '必须填写用户名'},
                ],
                addressRules: [
                    { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
                ]
            }
        },
        // 注册组件
        components: { Header },
        // 方法
        methods: {
            // 后退
            back() {
                // this.$router.push('/my');
                this.$router.go(-1);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .myProfileNext {
        .header {
            position: relative;
            .mu-icon {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            span {
                display: block;
                text-align: center;
            }
        }
        .mu-form {
            width: 100%;
            max-width: 460px;
            padding: 12px;
            margin: 0 auto;
            button {
                display: block;
                margin: 0 auto;
            }
        }
    }
</style>